<!DOCTYPE html>
<html>
<head>
    <!--合拍榜单-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <style>
        .new-topic .content {
            margin-top: 45px;
            background-color: #ffffff;
            padding-bottom: 0
        }

        .new-topic .content li {
            border-bottom: 1px solid #f5f5f5;
        }

        .new-topic .content li .title {
            font-size: 0.875rem;
            margin: 12px 0 12px 6px;
            color: black;
        }

        .new-topic .content li .title span {
            font-size: 0.75rem;
            color: #7a7a7a
        }

        .new-topic .content li input {
            width: 94vw;
            height: 24px;
            margin-left: 2vw;
            border: 1px #c4c4c4 solid;
            background-color: #f7f9f8;
            padding-left: 10px;
            box-sizing: border-box;
            margin-bottom: 20px
        }

        .new-topic .content li textarea {
            width: 94vw;
            height: 90px;
            margin-left: 2vw;
            border: 1px #c4c4c4 solid;
            background-color: #f7f9f8;
            padding-left: 10px;
            box-sizing: border-box;
            resize: none;
            margin-bottom: 10px
        }

        .new-topic .content li .upload a {
            border: 1px dashed #CCCCCC;
            width: 90px;
            height: 70px;
            display: block;
            text-align: center;
            padding: 20px 0 0 0;
            margin: 15px 15px 15px 6px;
            float: left;
        }

        .new-topic .content li .upload a i {
            font-size: 40px;
            color: #ccc
        }

        .new-topic .content li:last-child {
            display: block;
            content: "";
            overflow: hidden;
            border-bottom: none
        }

        .new-topic .content:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .new-topic .submitBtn {
            width: 100vw;
            text-align: center;
            height: 30px;
            margin: 20px auto
        }

        .new-topic .submitBtn a {
            font-size: 0.625rem;
            padding: 6px 20px;
            line-height: 24px;
            color: white;
            border-radius: 3px
        }

        .new-topic .submitBtn a {
            background-color: #f35273;
        }

        .new-topic .submitBtn a.cancel {
            background-color: #feb930;
        }
    </style>
</head>

<body class="new-topic">
<header id="header">
    <a href="index.html" class="iconfont fl">&#xe63f;</a>
    <div class="title">申请创建主题</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content">
    <ul>
        <li>
            <div class="title">
                主题标题 <span>[ 必填 ]</span>
            </div>
            <input type="text" maxlength="50" placeholder="50个字以内">
        </li>
        <li>
            <div class="title">
                主题介绍 <span>[ 必填 ]</span>
            </div>
            <textarea maxlength="50"></textarea>
        </li>
        <li>
            <div class="title">
                主题封面图片 <span>[ 必填 ]</span>
            </div>
            <div class="upload">
                <a href="#">
                    <i class="iconfont">&#xe602;</i>
                </a>
            </div>
        </li>

    </ul>
</div>

<div class="submitBtn fl">
    <a href="index.html">提交新主题</a>
    <a href="index.html" class="cancel">取消</a>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li class="active">
            <a class="camera" href="index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li>
            <a class="person" href="../user/user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
</body>
</html>